<template>
	<view
		:style="css"
		class="list-comment">
		<template v-if="listStatus === 'success'">
			<view class="list-comment-orderType">
				<view class="list-comment-orderType-box">
					<view
						:class="orderType==='createdTime'?'list-comment-orderType-box-hover':''"
						@click="clickOperatingButton('createdTime')">{{$t('contentNewList')}}</view>
					<view
						:class="orderType==='comment'?'list-comment-orderType-box-hover':''"
						@click="clickOperatingButton('comment')">{{$t('contentHotList')}}</view>
				</view>
			</view>
			<view
				class="for"
				v-for="item in list"
				@click="$_to('comment/detail?cid=' + item.cid)">
				<view
					class="_avatar"
					@click.stop="$_to('user/detail?uid=' + item.author.uid)">
					<image :src="item.author.avatar" mode="widthFix"></image>
				</view>
				<view class="_right">
					<view class="_right-nickname-roleName">
						<text
							class="_nickname"
							:style="'color:'+item.author.nicknameColor+';'">
							{{item.author.nickname}}</text>
						<text class="_roleName">{{item.author.roleName}}</text>
						<view
							v-if="item.controls.canEdit||item.controls.canDelete||item.manages.length"
							class="_administration">
							<view style="width: 1px;height: 22rpx;background: #EBEEF5;padding: 0;margin-left: 15rpx;"></view>
							<view
								v-if="item.controls.canEdit"
								@click.stop="clickEditCommentButton(item.cid)">编辑</view>
							<template v-if="item.manages.length">
								<view
									v-for="manages in item.manages"
									@click.stop="clickManagesButton(manages,item.cid)">
									{{manages.name}}
								</view>
							</template>
							<view
								v-if="item.controls.canDelete"
								@click.stop="clickDelCommentButton(item)">删除</view>
						</view>
						<view class="_like-dislike">
							<view
								@click.stop="clickLikeDislikeButton(item,'like')"
								:style="item.interaction.likeStatus?'color: #409EFF;':''"
								v-if="item.interaction.likeEnabled"><text :style="item.interaction.likeStatus?'color: #409EFF;':''" class="iconfont icon-good"></text>{{item.likeCount}}</view>
							<view
								@click.stop="clickLikeDislikeButton(item,'dislike')"
								:style="item.interaction.dislikeStatus?'color: #409EFF;':''"
								v-if="item.interaction.dislikeEnabled"><text :style="item.interaction.dislikeStatus?'color: #409EFF;':''" class="iconfont icon-bad"></text>{{item.dislikeCount}}</view>
						</view>
					</view>
					<view class="_right-content">
						<!-- <view
							class="_right-content-replyToComment"
							v-if="item.replyToComment">
							<view class="_right-content-replyToComment-top">
								<text>{{$t('comments')}}</text>
								<text>{{item.replyToComment.author.nickname}}</text>
								<text>|</text>
								<text>{{$t('contentPublishedOn')}}</text>
								<text>{{item.replyToComment.createdTimeAgo}}</text>
							</view>
							<view class="_right-content-replyToComment-bottom">
								{{item.replyToComment.content}}
							</view>
						</view> -->
						<view class="_content-1">
							<mp-html
								:tag-style="contentTagStyle"
								:content="$_content(item.content)"
								:selectable="true"
								style="font-size: 32rpx;line-height: 50rpx;"/>
						</view>
						<public-list-files :item="item.files"></public-list-files>
						<view class="_content-1-time">
							<text>{{item.createdTimeAgo}}</text>
							<view
								@click.stop="cliclGeotagButton(item.geotag.latitude,item.geotag.longitude)"
								v-if="item.geotag">
								<text class="iconfont icon-dingwei1"></text>
								<text>{{item.geotag.name}}</text>
							</view>
						</view>
						<view class="_content-2" v-if="item.previewComments.length">
							<view
								class="_content-2-for"
								v-for="previewComments in item.previewComments">
								<text class="_content-2-for-nickname">{{previewComments.author.nickname}}</text>
								<text class="_content-2-for-content">{{$_filterHtml(previewComments.content)}}</text>
							</view>
							<view class="_content-2-for-more">
								{{$t('modifierCount')}} {{item.commentCount}} {{$t('contentCommentCountDesc')}} <text class="iconfont icon-arrow-right"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view
				class="page-more"
				@click="clickMoreButton">
				{{listPageText}}
			</view>
		</template>
		<template v-if="listStatus === 'loading'">
			<view class="_loading">
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
			</view>
		</template>
		<template v-if="listStatus === 'empty'">
			<global-empty></global-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-comment",
		props:{
			pid:{
				type:String,
				default:""
			},
			cid:{
				type:String,
				default:""
			},
			uid:{
				type:[String, Number],
				default:""
			},
			css:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore'),
				orderType:"createdTime",
				contentTagStyle:null
			};
		},
		mounted(){
			uni.request({
				url:this.$_configFile() + "post.json",
				success: (res) => {
					this.contentTagStyle = res.data.contentTagStyle;
					this.getList();
				}
			})
		},
		methods: {
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/comment/list",
					{
						"pid":this.pid,
						"cid":this.cid,
						"users":this.uid,
						"filterType":"whitelist",
						"filterKeys":"cid,author.avatar,author.nicknameColor,author.nickname,author.roleName,author.uid,controls,manages,interaction,replyToComment,content,files,createdTimeAgo,geotag.latitude,geotag.longitude,geotag.name,previewComments,commentCount,likeCount,dislikeCount,replyToPost",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"content,author.nickname",
						"filterReplyToPostType":"whitelist",
						"filterReplyToPostKeys":"pid,title,content",
						"orderType": this.orderType
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = res.data.data.list;
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/comment/list",
					{
						"pid":this.pid,
						"cid":this.cid,
						"users":this.uid,
						"orderType": this.orderType,
						"filterType":"whitelist",
						"filterKeys":"cid,author.avatar,author.nicknameColor,author.nickname,author.roleName,controls,manages,interaction,replyToComment,content,files,createdTimeAgo,geotag.latitude,geotag.longitude,geotag.name,previewComments,commentCount,likeCount,dislikeCount",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"content,author.nickname",
						"page": this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listWithoutPage')
						}
					}
				)
			},
			clickOperatingButton(type){
				this.listStatus = 'loading';
				this.orderType = type;
				this.getList();
			},
			clickLikeDislikeButton(item,markType){
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":markType,
						"type":"comment",
						"fsid":item.cid
					},
					(res) => {
						if(res.data.code == 0){
							if(markType == 'like'){
								if(item.interaction.likeStatus){
									item.likeCount--
									item.interaction.likeStatus = false;
								}else{
									item.likeCount++
									item.interaction.likeStatus = true;
									if(item.interaction.dislikeStatus){
										item.interaction.dislikeStatus = false;
										item.dislikeCount--
									}
								}
								return
							}
							if(markType == 'dislike'){
								if(item.interaction.dislikeStatus){
									item.dislikeCount--
									item.interaction.dislikeStatus = false;
								}else{
									item.dislikeCount++
									item.interaction.dislikeStatus = true;
									if(item.interaction.likeStatus){
										item.interaction.likeStatus = false;
										item.likeCount--
									}
								}
								return
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					}
				)
			},
			// 点击，位置详情按钮
			cliclGeotagButton(latitude,longitude){
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					success: (res) => {}
				});
			},
			clickDelCommentButton(item){
				uni.showModal({
					title: '提示',
					content: '是否删除本回复？',
					success: (res) => {
						if(res.confirm){
							this.$_request(
								"DELETE",`/api/fresns/v1/comment/${item.cid}`,{},
								(ref) => {
									if(ref.data.code == 0){
										this.list = [];
										this.listStatus = "loading";
										this.listPage = 2;
										this.listPageText = this.$t('clickToLoadMore');
										this.getList();
									}else{
										uni.showToast({
											title: ref.data.message,
											icon: 'none',
											duration: 2000
										});
									}
								}
							)
						}
					}
				});
			},
			clickEditCommentButton(cid){
				uni.showLoading();
				this.$_request(
					"POST",`/api/fresns/v1/editor/comment/edit/${cid}`,{},
					(res) => {
						uni.hideLoading()
						this.$_to('editor/editor?type=comment&editType=edit&did='+res.data.data.detail.did)
					}
				)
			},
			clickManagesButton(manages,cid){
				let replacedUrl = manages.appUrl.replace(/\{accessToken\}/g, `${this.$_extensionPluginAccessToken()}`)
					.replace(/\{postMessageKey\}/g, `${manages.fskey}`)
					.replace(/\{viewType\}/g, 'detail')
					.replace(/\{uid\}/g, '')
					.replace(/\{pid\}/g, '')
					.replace(/\{cid\}/g, `${cid}`);
				this.$_to("pages/extendWebView?url="+encodeURIComponent(replacedUrl))
			},
		},
	}
</script>

<style lang="scss" scoped>
.list-comment{
	padding: 0 25rpx;
	._loading{
		background: #FFF;
		padding: 25rpx 0 1rpx 0;
		.skeleton-screen{
			width: 100%;
			height: 50rpx;
			margin-bottom: 25rpx;
		}
	}
	.list-comment-orderType{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 25rpx;
		.list-comment-orderType-box{
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid $border;
			padding: 15rpx;
			border-radius: 100rpx;
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				color: $placeholder;
			}
			view:nth-child(1){
				padding-right: 10rpx;
			}
			.list-comment-orderType-box-hover{
				color: $theme;
			}
		}
	}
	.page-more{
		display: flex;
		align-items: center;
		justify-content: center;
		color: $placeholder;
		font-size: 22rpx;
		line-height: 22rpx;
		padding: 25rpx 0;
	}
	.for{
		display: flex;
		padding: 25rpx 0;
		border-bottom: 1px solid $background;
		._avatar{
			width: 80rpx;
			height: 80rpx;
			border-radius: 100rpx;
			overflow: hidden;
			flex-shrink: 0;
		}
		._right{
			flex: 1;
			padding-left: 20rpx;
			._right-nickname-roleName{
				display: flex;
				align-items: center;
				._nickname{
					font-size: 28rpx;
					flex-shrink: 0;
				}
				._roleName{
					font-size: 22rpx;
					color: $placeholder;
					padding-left: 10rpx;
					flex-shrink: 0;
				}
				._administration{
					display: flex;
					align-items: center;
					flex-shrink: 0;
					view{
						font-size: 22rpx;
						line-height: 22rpx;
						padding-left: 15rpx;
						color: $placeholder;
					}
				}
				._like-dislike{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					view{
						line-height: 28rpx;
						font-size: 28rpx;
						padding-left: 25rpx;
						color: $placeholder;
						text{
							font-size: 28rpx;
						}
					}
				}
			}
			._right-content{
				// ._right-content-replyToComment{
				// 	border: 1px dashed #e4e4e4;
				// 	margin-top: 10rpx;
				// 	margin-bottom: 5rpx;
				// 	background: #fffdf1;
				// 	padding: 15rpx 15rpx 10rpx 15rpx;
				// 	._right-content-replyToComment-top{
				// 		line-height: 22rpx;
				// 		text{
				// 			font-size: 22rpx;
				// 			color: #acacb4;
				// 			padding-right: 10rpx;
				// 		}
				// 	}
				// 	._right-content-replyToComment-bottom{
				// 		font-size: 32rpx;
				// 		line-height: 45rpx;
				// 		color: #acacb4;
				// 		padding-top: 10rpx;
				// 	}
				// }
				._content-1{
					margin-top: 10rpx;
				}
				._content-1-time{
					line-height: 22rpx;
					color: $placeholder;
					padding-top: 15rpx;
					display: flex;
					align-items: center;
					text{
						font-size: 22rpx;
						flex-shrink: 0;
					}
					view{
						display: flex;
						align-items: center;
						line-height: 22rpx;
						padding-left: 15rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text{
							color: $placeholder;
						}
					}
				}
				._content-2{
					background: $background;
					padding: 15rpx 25rpx 25rpx 25rpx;
					margin-top: 20rpx;
					._content-2-for{
						line-height: 45rpx;
						._content-2-for-nickname{
							color: $theme;
							padding-right: 10rpx;
							font-size: 28rpx;
						}
						._content-2-for-content{
							font-size: 28rpx;
						}
					}
					._content-2-for-more{
						color: $theme;
						font-size: 28rpx;
						line-height: 28rpx;
						padding-top: 15rpx;
						text{
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
}
</style>